<template>
  <div class="loadHomeWork">
    <div class="loadHomeWorkIneer">
      <div class="loadTop" style="width: 80%">甲醇作业规范 {{ bigName }}</div>
      <div class="loadAndSearch">
        <div class="loadExcel">
          <div class="button" @click="clickDownLoadFile()">下载</div>
          <div class="buttonBack" @click="backIndexPage()">返回</div>
        </div>
      </div>

      <div class="table" :style="{ width: tableWidth }" style="height: 82vh">
        <iframe
          v-show="src"
          :src="src"
          width="100%"
          height="100%"
          style="background: white"
          frameborder="0"
        ></iframe>
      </div>
    </div>
  </div>
</template>

<script>
import EventBus from "@/mitt/eventBus.js";
import rename from "@/mitt/getPath.js";
import service from "@/api/api";

import zhCn from "element-plus/es/locale/lang/zh-cn";
import axios from "axios";
export default {
  name: "",
  data() {
    return {
      locale: zhCn,

      tableData: [],
      tableWidth: null,
      loadName: null,
      show: "none",
      addOrEdit: "上传",
      currentNum: 0,
      roleId: null,
      totalPages: null,
      uploadfile: true,
      renderName: "",
      // 8f42a25d-1c37-4400-98e9-6181785f710f.pdf
      id: "",
      name: "",
      show1: "none",
      version: null,
      regualrName: null,
      file: null,
      filePath: "",
      fileName: "",
      jtData: null,
      token: "",
      show3: "none",
      bigName: "",
      totalNumber: null,
      currentPdf: "",
      newAdd: "",
      src: "",
      deleteRemoveteOne: "",
      token: "",
      certificateType: "",
      filePath: "",
      certificateType: "",
    };
  },
  props: [],
  components: {},
  computed: {},
  filters: {},

  methods: {
    backIndexPage() {
      this.$router.go(-1);
    },

    getLastTime() {
      let date = new Date();

      let year = date.getFullYear();
      let month =
        date.getMonth() + 1 > 9
          ? date.getMonth() + 1
          : "0" + date.getMonth() + 1;
      let day = date.getDate() > 9 ? date.getDate() : "0" + date.getDate();
      let hour = date.getHours() > 9 ? date.getHours() : "0" + date.getHours();
      let min =
        date.getMinutes() > 9 ? date.getMinutes() : "0" + date.getMinutes();
      let second =
        date.getSeconds() > 9 ? date.getSeconds() : "0" + date.getSeconds();

      return `${year}/${month}/${day} ${hour}:${min}:${second}`;
    },
    // 上传文件到远程
    submitAddFile() {
      if (this.file) {
        let data = {
          file: this.file,
          type: 6,
          fileName: this.fileName,
        };
        service({
          method: "post",
          url: "/system/upload-file",
          headers: {
            "Content-Type": "multipart/form-data",
          },
          data: data,
        })
          .then((res) => {
            this.filePath = res.data;
            this.src = `${this.$link}standard/${res.data}`;
            this.uploadfile = "none";
            this.sureAdd();
          })
          .catch((err) => {
            this.uploadfile = "none";
            this.$message({
              message: err,
              type: "fail",
            });
          });
      } else {
        this.$message({
          message: "请先选择文件再上传",
          type: "warning",
        });
      }
    },
    // 修改list
    sureAdd() {
      let time = this.getLastTime();
      let data = {
        certificateType: this.certificateType,
        file: this.filePath,
        id: this.id,
        lastModifiedDate: time,
        name: this.name,
      };
      if (this.id) {
        service({
          method: "put",
          data: data,
          url: "/ship-standard",
        })
          .then((r) => {
            if (r.status == "SUCCESS") {
              this.$message({
                type: "success",
                message: "更换成功",
              });
              this.deleteRomoteFile();
              this.show = "none";
            }
          })
          .catch((err) => {
            this.$message({
              type: "info",
              message: "出错了！",
            });
          });
      }
    },
    deleteRomoteFile() {
      let data = {
        fileName: this.deleteRemoveteOne,
        type: 6,
      };
      service({
        method: "delete",
        url: `/system/delete-file`,
        params: data,
      }).then((r) => {
      });
    },
    handleRowDblclick(row) {
      this.clickEdit(row.id);
    },

    //批量删除结束=============================

    // 导入文件================
    uploadFile() {
      this.uploadfile = "block";
      this.addOrEdit = "上传";
    },
    getFile(event) {
      this.file = event.target.files[0];
      this.fileName = this.file.name;
    },

    cancelUp() {
      this.file = "";
      this.fileName = "";
      this.uploadfile = "none";
      document.getElementsByClassName("addfile")[0].value = "";
    },

    // 删除数据
    deleteOne(a) {
      // let that = this;
      this.$alert("确定删除这条信息？", {
        confirmButtonText: "确定",
        callback: (action) => {
          if (action == "confirm") {
            service({
              method: "delete",
              url: `/ship-standard/${a}`,
            }).then((r) => {
              if (r.status == "SUCCESS") {
                this.$message({
                  type: "success",
                  message: "删除成功",
                });
                this.deleteRomoteFile();
                this.$router.push("/app.shipSpecificationAdd");
              }
            });
          } else {
            this.$message({
              type: "info",
              message: "取消删除",
            });
          }
        },
      });
    },
    // 下载pdf
    async clickDownLoadFile() {
      let that = this;
      let time = this.getFileName();
      this.token = sessionStorage.getItem("token");
      this.token = JSON.parse(this.token);

      let url = this.$loadFile + "/system/download/" + this.name;

      axios({
        method: "get",
        url: url,
        responseType: "blob", // 关键：设置响应类型为blob
        params: {
          type: 6,
        },
        headers: {
          token: that.token,
        },
      }).then((response) => {
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement("a");
        link.href = url;
        link.download = time + "-" + this.loadName;
        // b.toString();
        // if (b.includes(".png") || b.includes(".jpg")) {
        //   link.download = time + b; // 替
        // } else if (b.includes(".pdf") || b.includes(".PDF")) {
        //   link.download = time + b;
        // }
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        window.URL.revokeObjectURL(url);
      });
    },

    close() {
      this.show = "none";
      this.show1 = "none";
      this.notPassMessage = null;
    },

    // 导出文件
    getFileName() {
      let date = new Date();
      let year = date.getFullYear().toString();
      let month =
        date.getMonth() + 1 > 9
          ? date.getMonth() + 1
          : "0" + (date.getMonth() + 1);
      let day =
        date.getDate() > 10 ? date.getDate().toString() : "0" + date.getDate();
      let hour =
        date.getHours() > 10
          ? date.getHours().toString()
          : "0" + date.getHours();
      let min =
        date.getMinutes() > 10
          ? date.getMinutes().toString()
          : "0" + date.getMinutes();
      date = null;
      return `${year}${month}${day}${hour}${min}`;
    },

    sendMessage() {
      let res = rename();
      EventBus.emit("custom-event", res);
    },

    handSize() {
      if (window.innerWidth > 630) {
        if (this.$store.state.width == 200) {
          this.tableWidth = (window.innerWidth - 170) * 0.985 - 20 + "px";
        } else if (this.$store.state.width == 90) {
          this.tableWidth = (window.innerWidth - 60) * 0.985 - 20 + "px";
        }
      } else {
        this.tableWidth = window.innerWidth - 30 + "px";
      }
    },
  },
  watch: {
    "$store.state.width"(newVal, oldVal) {
      //对数据执行操作
      if (window.innerWidth > 630) {
        if (newVal == 90) {
          this.tableWidth = (window.innerWidth - 60) * 0.985 - 20 + "px";
        } else if (newVal == 200) {
          this.tableWidth = (window.innerWidth - 170) * 0.985 - 20 + "px";
        }
      }
    },
  },

  created() {
    this.sendMessage();

    this.roleId = sessionStorage.getItem("role");
    this.src = `${this.$link}standard/${this.$route.query.name}`;

    this.name = this.$route.query.name;
    this.bigName = this.$route.query.bigName;
    this.loadName = this.$route.query.loadName;

    // 文件名
  },
  beforeMount() {
    if (window.innerWidth > 630) {
      if (this.$store.state.width == 200) {
        this.tableWidth = (window.innerWidth - 170) * 0.985 - 20 + "px";
      } else if (this.$store.state.width == 90) {
        this.tableWidth = (window.innerWidth - 60) * 0.985 - 20 + "px";
      }
    } else {
      this.tableWidth = window.innerWidth - 30 + "px";
    }
  },
  mounted() {
    window.addEventListener("resize", this.handSize);
  },
  beforeUnmount() {
    window.removeEventListener("resize", this.handSize);
  },
};
</script>
<style lang="less" scoped>
iframe {
  background-color: #f0f0f0; /* 修改为需要的背景颜色 */
  border: none; /* 去除边框 */
}
.manyInput::-webkit-scrollbar {
  width: 5px; /* 自定义滚动条的宽度 */
  height: 5px; /* 如果需要自定义垂直滚动条的高度 */
}

/* 自定义滚动条滑块的颜色 */
.manyInput::-webkit-scrollbar-thumb {
  background-color: #f1f1f1;
  border-radius: 10px; /* 可选：为滚动条滑块添加圆角 */
}

/* 自定义滚动条轨道的颜色 */
.manyInput::-webkit-scrollbar-track {
  background-color: white;
  border-radius: 10px; /* 可选：为滚动条轨道添加圆角 */
}

.dialogText {
  margin: auto;
  width: 50%;
  line-height: 4vh;
  font-size: 25px;
  color: black;
  // text-indent: 10px;
  text-align: center;
  // font-size: 20px;
  font-weight: 800;
}

.dialog,
.dialog1 {
  width: 100%;
  height: 100%;
  background: #dfe6e8;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  z-index: 100;
}

.loadHomeWork {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
  .loadHomeWorkIneer {
    width: 98.5%;
    height: 91vh;
    margin: auto;
    margin-top: 1vh;
    background: white;

    .loadAndSearch {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
    }
  }
}
.table {
  width: 98.5%;
  margin: auto;
  // margin-top: 2vh;
  height: 65vh;
  // background: red;
}

@media (min-width: 0px) and (max-width: 960px) {
  .manyInput {
    width: 375px !important;
    display: block !important;
    .inputInner {
      margin: auto !important;
      margin-top: 10px !important;
    }
  }
}
</style>